<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="Author" content="TanShenghu">
    <title>page 组件</title>
    <style>
    *{margin:0;padding:0;}
    #page{width:520px;height:320px;margin:10px auto;}
    #page .page{height:320px;display:none;transition:left .2s linear 0s;}
    #page .page img{width:100%;height:100%}
    #page .page:nth-of-type(1){background:red;}
    #page .page:nth-of-type(2){background:pink;}
    #page .page:nth-of-type(3){background:orange;}
    #page .page:nth-of-type(4){background:yellow;}
    #page .page:nth-of-type(5){background:blue;}
    </style>
    <script src="http://a.alipayobjects.com/??seajs/seajs/2.2.0/sea.js,jquery/jquery/1.8.2/jquery.js"></script>
    <script>
    seajs.config({
      paths: {
            host: 'http://www.tanshenghu.com',
            widget: 'http://www.tanshenghu.com/widget'
        },
        alias: {
            $: 'host/static/js/$',
            page: 'widget/page/1.0.0/page'
        }
    });
    </script>
</head>
<body>
    <div id="page">
        <div class="page"><img src="./1.png"></div>
        <div class="page"><img src="./2.png"></div>
        <div class="page"><img src="./3.png"></div>
        <div class="page"><img src="./4.png"></div>
        <div class="page"><img src="./5.png"></div>
        <div>fds</div><div class="page">fdsg</div>
    </div>
    <br>
    <div align="center"><a href="javascript:;" onclick="pageNum=1;opage.goTo(1)">第一页</a> <a href="javascript:;" onclick="pageNum=2;opage.goTo(2)">第二页</a> <a href="javascript:;" onclick="pageNum=3;opage.goTo(3);">第三页</a> <a href="javascript:;" onclick="pageNum=4;opage.goTo(4)">第四页</a> <a href="javascript:;" onclick="pageNum=5;opage.goTo(5)">第五页</a> <select><option value="scroll">scroll</option><option value="zIndex">zIndex</option></select></div>
    
    <script>
    var pageNum = 1;
    seajs.use('page', function( Page ){
        
        var options = {
            jointly: true, // 参数对象只否公用，如果不公用组件内部会把参数对象克隆一份组件内部使用，不会影响外部参数
            pageContainer: '#page',
            child: '.page',
            curPage: 1,
            curZindex: 100,
            otherZindex: 0,
            way: 'scroll', // scroll(滑动), zIndex(叠盖) 暂时支持两种切换动画模式，默认值为scroll
            beforeLoad: function( page, lastPage, isSamePage, special ){
                if( isSamePage ){
                    
                    // 考虑到一些特殊情况，需要逆行运动动画设置如:原本应该从左至右或从右至左的运动方式，只要设置inverse=true就会把原本的运动方向反过来运动
                    if( pageNum==3 ){
                        //special.inverse = true;
                    }
                    
                }
                //console.log( isSamePage );
            },
            samePage: function( page, lastPage ){
                //console.log( '您在相同页面打转: '+ page.html() );
            },
            pageLoad: function( page, lastPage ){
                //console.log( '您点击的页面内容: '+ page.html() );
            }
        };
        
        document.querySelector('select').onchange = function(){
            options.way = this.value;
        }
        
        window.opage = Page( options )
        
    });
    </script>
</body>
</html>